<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div
      class="smaBox"
      v-for="item in list"
      :key="item.id"
      @click="$router.push('/doctor?user_id=' + item.user_id)"
    >
      <div class="left">
        <img :src="item.avatar" alt="" />
      </div>
      <div class="right">
        <h2>
          {{ item.realname }}<span>{{ item.doctor.title }}</span
          ><span>可开处方</span>
        </h2>
        <p>执业编号：{{ item.doctor.practice_cert_no }}</p>
        <p>
          <span v-for="val in item.doctor.good_at_class" :key="val.class_id">{{
            val.class_name
          }}</span>
        </p>
        <p>擅长：{{ item.doctor.good_at }}</p>
        <p>
          <van-icon name="star" color="#F8AB27" size="12"
            ><span>{{
              item.doctor.statistics.last_month_evaluate_score
            }}</span></van-icon
          >
          <span class="shu">|</span>月回答<span>{{
            item.doctor.statistics.last_month_consult_case_count
          }}</span
          ><span class="shu">|</span> 月处方<span>{{
            item.doctor.statistics.last_month_prescription_count
          }}</span>
        </p>
        <p>
          <span v-for="val in item.doctor.labels" :key="val.label_id">{{
            val.label_name
          }}</span>
        </p>
        <div>
          <p>
            <span
              >图文&nbsp;￥{{
                Math.floor(item.doctor.consult_text_price)
              }}</span
            ><span
              >电话&nbsp;￥{{
                Math.floor(item.doctor.consult_call_price)
              }}</span
            >
          </p>
          <van-button
            style="
              height: 30px;
              border: none;
              background-color: #e5f8f6;
              border-radius: 35px;
            "
            plain
            type="success"
            >问医生</van-button
          >
        </div>
      </div>
    </div>
  </van-list>
</template>
<script setup>
import { ref, watch } from "vue";
import { onBeforeRouteUpdate, useRouter, useRoute } from "vue-router";
import { getDoctors } from "../../API";
import { useCount } from "../../store/index";
let store = useCount();
let router = useRouter();
let route = useRoute();
//推荐医生接口参数
let page = 1;
let code = store.params.code;
let id = store.params.id;
let class_id = ref("");
// 推荐医生列表
let list = ref([]);
//触底加载参数
let loading = ref(true);
let finished = ref(false);

let sort_type = ref("");
let min_price = ref("");
let max_price = ref("");
let price_column = ref("");

// 推荐医生接口
let getDoctorList = async () => {
  loading.value = true;
  let { data } = await getDoctors({
    page,
    code,
    class_id: class_id.value,
    sort_type: sort_type.value,
    min_price: min_price.value,
    max_price: max_price.value,
    price_column: price_column.value,
  });
  list.value.push(...data.data.list);
  // console.log(list.value);
  loading.value = false;

  // 所有数据都被加载完后，显示“没有更多数据”
  finished.value = !data.data.list.length;
};
// getDoctorList();
// 初始化请求函数
let initRequest = () => {
  page = 1;
  getDoctorList();
};
// 解决路由缓存问题;
onBeforeRouteUpdate(() => {
  initRequest();
});
//触底加载函数
let onLoad = () => {
  page++;
  // console.log("正在加载" + page);
  getDoctorList();
};
watch(
  () => [
    store.params.sort_type,
    store.params.min_price,
    store.params.max_price,
    store.params.price_column,
    store.params.class_id,
  ],
  ([newSortType, newMinPrice, newMaxPrice, newPriceColumn, newClass_id]) => {
    (sort_type.value = store.params.sort_type || ""),
      (min_price.value = store.params.min_price || ""),
      (max_price.value = store.params.max_price || ""),
      (price_column.value = store.params.price_column || "");
    class_id.value = store.params.class_id;
    // console.log(
    //   sort_type.value,
    //   min_price.value,
    //   max_price.value,
    //   price_column.value,
    //   class_id.value
    // );
    list.value = [];
    initRequest();
  },
  { immediate: true }
);
</script>
<style scoped>
.smaBox {
  display: flex;
  justify-content: flex-start;
  padding: 30px 20px;
  border-top: 1px solid #efefef;
  margin-top: 20px;
}
.left {
  width: 108px;
  margin-right: 20px;
}
.left img {
  width: 108px;
  height: 108px;
  border-radius: 20px;
}
.right {
  width: 100%;
}
.right h2 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.right h2 span:nth-of-type(1) {
  color: #727272;
  font-size: 28px;
  font-weight: normal;
  margin: 0 20px;
}
.right h2 span:nth-of-type(2) {
  width: 114px;
  height: 38px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e2edff;
  color: #668df4;
  border-radius: 10px;
}
.right p:nth-of-type(1) {
  color: #727272;
  font-size: 20px;
  margin: 10px 0;
}
.right p:nth-of-type(2) {
  font-size: 17px;
  color: #999;
  margin: 15px 0;
  display: flex;
  justify-content: flex-start;
}
.right p:nth-of-type(2) span {
  width: 65px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #eee;
  margin-right: 20px;
}
.right p:nth-of-type(3) {
  color: #727272;
  font-size: 27px;
  width: 480px; /* 设置段落的宽度 */
  height: 70px; /* 设置段落的高度 */
  overflow: hidden; /* 隐藏超出高度的内容 */
  display: -webkit-box; /* 将段落视为弹性伸缩盒子 */
  -webkit-line-clamp: 2; /* 设置最大显示行数为2行 */
  -webkit-box-orient: vertical; /* 设置伸缩盒子的排列方向为垂直 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.right p:nth-of-type(4) {
  margin: 20px 0;
  color: #969696;
}
.right p:nth-of-type(4) span {
  color: #f8ab27;
  padding: 0 10px;
  font-weight: bold;
}
.shu {
  color: #727272;
}
.right p:nth-of-type(5) {
  font-size: 17px;
  color: #909090;
  font-weight: bold;
  margin: 15px 0;
  display: flex;
  justify-content: flex-start;
}
.right p:nth-of-type(5) span {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background-color: #eee;
  margin-right: 20px;
}
.right div {
  width: 95%;
  display: flex;
  justify-content: space-between;
  font-weight: bolder;
  margin: 20px 0;
}
.right div span {
  font-size: 28px;
  margin-right: 30px;
}
</style>